<!DOCTYPE html>
<html>
<head>
    <title>API Response Debug</title>
</head>
<body>
    <h1>API Response Debug</h1>
    <button onclick="testAPI()">Test API</button>
    <div id="result"></div>

    <script>
        async function testAPI() {
            try {
                const response = await fetch('https://tqi.techlinkpets3d.com/api/daka/person_rank', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const text = await response.text();
                document.getElementById('result').innerHTML = `
                    <h2>Response Details:</h2>
                    <p>Status: ${response.status}</p>
                    <p>Status Text: ${response.statusText}</p>
                    <p>Content-Type: ${response.headers.get('content-type')}</p>
                    <h3>Response Text:</h3>
                    <pre>${JSON.stringify(text, null, 2)}</pre>
                `;
                
                try {
                    const jsonData = JSON.parse(text);
                    document.getElementById('result').innerHTML += `
                        <h3>Parsed JSON:</h3>
                        <pre>${JSON.stringify(jsonData, null, 2)}</pre>
                    `;
                } catch (parseError) {
                    document.getElementById('result').innerHTML += `
                        <h3>JSON Parse Error:</h3>
                        <pre>${parseError.message}</pre>
                    `;
                }
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <h2>Error:</h2>
                    <pre>${error.message}</pre>
                `;
            }
        }
    </script>
</body>
</html>